<template>
	<view class="information">
		<uni-section class="mb-10" title="头像">
			<template v-slot:right>
				<view style="height: 60rpx;line-height: 60rpx;display: flex;justify-items: center;">
					<!-- <image :src="file" alt="" mode="widthFix" style="width: 60rpx;">></image> -->
					<uni-file-picker limit="1" :del-icon="false" 
					disable-preview v-model="file" :imageStyles="imageStyles"
					@select="select" 
					file-mediatype="image">选择</uni-file-picker>
					<uni-icons type="right" color="#999" size="18"></uni-icons>
				</view>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="昵称"  @click="inputDialogToggle">
			<template v-slot:right>
				{{userInfo.nick_name}}
				<uni-icons type="right" color="#999" size="18"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="账号">
			<template v-slot:right>
				{{userInfo.business_mobile}} （{{userInfo.authority_name}}账号）
				<!-- <uni-icons type="right" color="#999" size="18"></uni-icons> -->
			</template>
		</uni-section>
		<uni-section class="mb-10" title="修改登录密码" @click="toPassword">
			<template v-slot:right>
				<uni-icons type="right" color="#999" size="18"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="隐私政策">
			<template v-slot:right>
				<uni-icons type="right" color="#999" size="18"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="用户协议">
			<template v-slot:right>
				<uni-icons type="right" color="#999" size="18"></uni-icons>
			</template>
		</uni-section>
		<uni-section class="mb-10" title="版本">
			<template v-slot:right>
				1.1.1
			</template>
		</uni-section>
		<button class="out" @click="out">退出登录</button>
	</view>
	<view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" v-model="nick_name"
				placeholder="请输入昵称" @confirm="changeNickName"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { account } from '@/utils/api.js'
	
	export default {
		data() {
			return {
				imageStyles: {
									width: 45,
									height: 45,
									border: {
										radius: '50%'
									}
								},
				file: [],
				userInfo: {
					authority: 0,
					authority_name: '',
					business_id: '',
					business_mobile:  "13291282956",
					id: 2,
					nick_name: "用户-2956",
					profile: 'https://img.js.design/assets/avatarImg/Small64dc7cecd5a27071584095111701915503632.png',
					token: ''
				},
				nick_name: ''
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.file.push({
				url: this.userInfo.profile
			})
			console.log(this.userInfo)
		},
		methods: {
			out(){
				uni.setStorage({
				  key: 'userInfo',
				  data:{
						authority: 0,
						authority_name: '',
						business_id: '',
						business_mobile:  "",
						id: 2,
						nick_name: "",
						profile: null,
						token: ''
					},
				});
				uni.navigateTo({
					url:"/pages/login/index"
				})
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			changeNickName(){
				account({nick_name: this.nick_name}, this.userInfo.id).then(res=>{
					uni.showLoading({
						title: '昵称修改成功！'
					})
					setTimeout(() => {
						this.userInfo.nick_name = this.nick_name
						uni.hideLoading()
						uni.setStorage({
						  key: 'userInfo',
						  data: res.data,
						});
					}, 500)
				})
			},
			toPassword(){
				let business_mobile=this.userInfo.business_mobile
				let id=this.userInfo.id
				uni.navigateTo({
					url:`/pages/information/editPassword?business_mobile=${business_mobile}&id=${id}`
				})
			},
			select(e) {
				let filePath = e.tempFilePaths[0]
				console.log(filePath)
				uni.uploadFile({
					url: 'http://47.96.22.12:18125/update_profile/'+this.userInfo.id+'/',
					filePath,
					name: 'profile',
					// formData: {
					// 	'Fishplaceid': this.id,
					// },
					success: (res) => {
						uni.showLoading({
							title: '头像修改成功！'
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.setStorage({
							  key: 'userInfo',
							  data: res.data,
							});
						}, 500)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.information{
	padding: 20rpx 40rpx;
	.out{
		width: 200rpx !important;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin: 30rpx auto;
		background: #fff !important;
		color: #D43030 !important;
		border: #D43030 2rpx solid !important;
	}
}
:deep(.uni-popup-dialog){
		.uni-dialog-title{
			.uni-popup__info{
				padding-top: 20rpx;
				span{
					font-size: 28rpx !important;
					color: #000000 !important;
				}
			}
		}
		.uni-dialog-content{
			padding: 30rpx;
		}
		.uni-dialog-button-group{
			justify-content: space-around;
			padding-bottom: 30rpx;
	
			.uni-dialog-button{
				.uni-dialog-button-text{
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					text-align: center;
					background: #E5E5E5;
					color: #333;
				}
				.uni-button-color{
					color: #fff;
					background: #D43030;
				}
			}
		}
	}
</style>
